<template>
  <div class="flow-wrap">
    <el-dialog :visible.sync="dialogVisible.show" center>
      <div class="show-title">序列号：{{ sn }}</div>
      <div class="show-title">票据：{{ ticket }}</div>
      <div class="show-title">URL：{{ url }}</div>
      <el-form
        :inline="true"
        :model="ruleform"
        ref="form"
        :rules="rules"
        class="demo-form-inline ip-form"
      >
        <el-form-item label="协议" prop="ptl">
          <el-input
            v-model="ruleform.ptl"
            style="width:100px"
            disabled
            message
            placeholder
          ></el-input>
        </el-form-item>
        <el-form-item label="码流" prop="sub">
          <el-input
            v-model="ruleform.sub"
            style="width:100px"
            disabled
            message
            placeholder
          ></el-input>
        </el-form-item>
        <el-form-item label="通道号" prop="channel">
          <el-input
            v-model="ruleform.channel"
            style="width:100px"
            disabled
            message
            placeholder
          ></el-input>
        </el-form-item>
        <br />
        <el-form-item
          label="截止时间"
          prop="limited_deadtime"
          show-overflow-tooltip
        >
          <div class="block">
            <el-date-picker
              v-model="ruleform.limited_deadtime"
              type="datetime"
              placeholder="选择日期时间"
            ></el-date-picker>
          </div>
        </el-form-item>
        <br />
        <el-form-item
          label="使用次数"
          prop="limited_times"
          show-overflow-tooltip
        >
          <el-input
            v-model="ruleform.limited_times"
            message
            placeholder
          ></el-input>
        </el-form-item>
        <br />
        <el-form-item label="票据密码" prop="ticket_pwd">
          <el-input
            v-model="ruleform.ticket_pwd"
            message
            placeholder
          ></el-input>
        </el-form-item>
        <br />
        <el-form-item label="每天时段" prop="limited_everyday">
          <el-time-picker
            is-range
            v-model="ruleform.limited_everyday"
            format="HH:mm"
            value-format="HH:mm"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择时间范围"
            :picker-options="{
              selectableRange: '00:00 - 23:59',
            }"
          ></el-time-picker>
        </el-form-item>
        <br />
        <el-form-item label="每周时段" prop="limited_weekdays">
          <el-checkbox-group v-model="ruleform.limited_weekdays">
            <el-checkbox :label="1" :value="1">周一</el-checkbox>
            <el-checkbox :label="2" :value="2">周二</el-checkbox>
            <el-checkbox :label="3" :value="3">周三</el-checkbox>
            <el-checkbox :label="4" :value="4">周四</el-checkbox>
            <el-checkbox :label="5" :value="5">周五</el-checkbox>
            <el-checkbox :label="6" :value="6">周六</el-checkbox>
            <el-checkbox :label="7" :value="7">周日</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <br />
        <el-form-item>
          <el-button type="primary" plain @click="onSubmit('form')"
            >修改票据</el-button
          >
          <el-button type="warning" plain @click="onReset('form')"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { tempToTime, getYMDHMS } from "@/utils/Tool";
import { getData, postData } from "@/request/http";
export default {
  name: "",
  components: {},
  props: {
    dialogVisible: {
      type: Object,
      default() {
        return {
          show: false,
        };
      },
    },
    ticket: {
      type: String,
      default: "",
    },
    url: {
      type: String,
      default: "",
    },
  },
  data() {
    var checkNumber = (rule, value, callback) => {
      if (value != "") {
        if (/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/.test(value) == false) {
          callback(new Error("请输入大于0的数字"));
        } else {
          callback();
        }
      } else {
        callback();
      }
      callback();
    };
    return {
      sn: "",
      ticket_seled: "",
      ruleform: {
        ptl: "",
        sub: "",
        channel: "",
        limited_deadtime: "",
        limited_times: "",
        ticket_pwd: "",
        limited_everyday: ["", ""],
        limited_weekdays: [],
      },
      rules: {
        ptl: [{ required: false, message: "请输入协议", trigger: "blur" }],
        sub: [{ required: false, message: "请输入", trigger: "blur" }],
        channel: [{ required: false, message: "请输入", trigger: "blur" }],
        limited_deadtime: [{ required: false, message: "", trigger: "blur" }],
        limited_times: [
          { required: false, message: "必须为数字值" },
          { validator: checkNumber, trigger: "blur" },
        ],
        ticket_pwd: [
          { required: false, message: "必须为数字值" },
          { validator: checkNumber, trigger: "blur" },
        ],
        limited_everyday: [
          { required: false, message: "请输入", trigger: "blur" },
        ],
        limited_weekdays: [
          {
            type: "array",
            required: false,
            message: "请至少选择一个",
            trigger: "change",
          },
        ],
      },
    };
  },
  computed: {},
  created() {},
  watch: {
    ticket: {
      handler(newVal) {
        this.ticket_seled = newVal;
        console.log(this.ticket_seled);
        this.getList();
      },
      immediate: true,
    },
  },
  mounted() {
    console.log(this.$route.query.sn);
    this.sn = this.$route.query.sn;
  },
  methods: {
    //添加 提交
    onSubmit(formName) {
      var that = this;
      //日历
      var picker_timestamp = new Date(that.ruleform.limited_deadtime).getTime();
      //每天时段起止时间
      var limited_everyday = that.ruleform.limited_everyday;
      var limited_everyday_end =
        Array.isArray(limited_everyday) &&
        limited_everyday[0] != "" &&
        limited_everyday[1] != ""
          ? that.ruleform.limited_everyday[0] +
            "-" +
            that.ruleform.limited_everyday[1]
          : "";
      console.log(limited_everyday);
      console.log(limited_everyday_end);
      console.log(that.ruleform.limited_weekdays);

      var limited_weekdays = that.ruleform.limited_weekdays;
      var limited_weekdays_sub = Array.from(
        new Set(limited_weekdays.map((item) => Number(item)))
      );

      that.$refs[formName].validate((valid) => {
        if (valid) {
          postData("/adminweb/device/stream/live/ticket/update", {
            ticket: that.ticket,
            limited_deadtime: !picker_timestamp ? 0 : picker_timestamp,
            limited_times: Number(that.ruleform.limited_times),
            ticket_pwd: that.ruleform.ticket_pwd,
            limited_everyday: limited_everyday_end ? limited_everyday_end : "",
            limited_weekdays: limited_weekdays_sub,
          })
            .then((res) => {
              if (res.code == 0) {
                that.$message.success("修改成功！");
                //刷新页面
              } else {
                that.$message.error(res.code + "，" + res.msg);
              }
            })
            .catch((res) => {
              that.$message.error(res.code + "，" + res.msg);
            });
        } else {
          that.$message.error("修改失败");
          return false;
        }
      });
    },
    // 重置
    onReset(val) {
      //this.$emit("reset", true);
      this.$refs[val].resetFields();
    },

    //初始展示
    getList() {
      postData("/adminweb/device/stream/live/ticket/get", {
        ticket: this.ticket,
      })
        .then((res) => {
          console.log(res);
          if (res.code == 0) {
            let datas = res.datas;
            this.ruleform.ptl = datas.ptl;
            this.ruleform.sub = datas.sub;
            this.ruleform.channel = datas.channel;
            //日历，限制时间
            var da = datas.limited_deadtime;
            console.log(da);
            this.ruleform.limited_deadtime = getYMDHMS(da);
            if (datas.limited_deadtime == 0) {
              this.ruleform.limited_deadtime = "";
            }
            //使用次数
            this.ruleform.limited_times = datas.limited_times;
            this.ruleform.ticket_pwd = datas.ticket_pwd;

            //每天起止时间
            var limited_everyday = datas.limited_everyday;
            console.log(limited_everyday); //16:15-17:15
            console.log(typeof limited_everyday); //16:15-17:15

            if (!datas.limited_everyday == "") {
              console.log(3);
              var limited_everyday_show = limited_everyday.split("-");
              console.log(limited_everyday_show, typeof limited_everyday_show); //["16:15", "17:15"]
              this.ruleform.limited_everyday = limited_everyday_show;
            } else {
              console.log(4);
              this.ruleform.limited_everyday = ["", ""];
            }

            //显示每周几,稍等我想下
            if (datas.limited_weekdays != "") {
              var limited_weekdays = JSON.parse(datas.limited_weekdays);
            } else {
              var limited_weekdays = datas.limited_weekdays;
            }
            console.log(limited_weekdays);
            var result = [];
            for (var i = 0; i < limited_weekdays.length; i++) {
              result.push(Number(limited_weekdays[i]));
            }
            console.log(result);
            this.ruleform.limited_weekdays = result;
          } else if (res.code == -56055) {
            return;
          } else {
            this.$message.error(res.code + "，" + res.msg + 1);
          }
        })
        .catch((res) => {
          this.$message.error(res);
        });
    },
  },
};
</script>
<style scoped>
.flow-wrap {
  margin-bottom: 20px;
  border-radius: 4px;
  overflow: hidden;
  color: #303133;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  border: 1px solid #ebeef5;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.totalFlow-form {
  /* padding-left: 30px; */
}
.item {
  margin-top: 30px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.totalFlow-wrap >>> .el-form--inline .el-form-item__content {
  display: block;
}
.totalFlow-wrap >>> .el-radio {
  margin-top: 0;
}

.show-title {
  margin-bottom: 10px;
  /* font-weight: 600; */
}
</style>
